<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				基础信息
			</div>
			<el-row class="main-color mt-[20px]">
				<el-col :span="6"  class="v-flex">
					<span class="w-[100px] text-right">工序名称：</span>
					<el-input  class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
				</el-col>
			</el-row>
			<el-row class="main-color mt-[20px]">
				<el-col :span="6"  class="v-flex">
					<span class="w-[100px] text-right">所属产品分类：</span>
					<el-input  class="flex-1 ml-[10px]" placeholder="请输入"></el-input>
				</el-col>
			</el-row>
			<el-row class="main-color mt-[20px]">
				<el-col :span="6"  class="v-flex v-col-top">
					<span class="w-[100px] text-right">节点：</span>
					<div class="flex-1 ml-[10px]">
						<div class="mb-[10px]" v-for="(item,index) in Data">
							<span>节点名称</span>
							<div class="v-flex mt-[10px]">
								<el-input class=" mr-[10px]" placeholder="请输入"></el-input>
								<el-icon @click="deleteNode(index)">
									<RemoveFilled />
								</el-icon>
							</div>
						</div>
						<el-button class="w-[90px] h-[36px]" color="#0054A6" type="primary"
							@click="addNode">添加节点</el-button>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]" >取消</el-button>
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">提交</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	const Data = ref([])
	// 添加节点
	const addNode = (fullPath : any) => {
		Data.value.push({ name: 1 })
	}
	// 删除节点
	const deleteNode = (index : any) => {
		console.log(index)
		if(index == 0){
			Data.value = Data.value.slice(0,0);
		}else{
			Data.value = Data.value.splice(index, 1);
		}
	
	}
	// 监听节点数据
	watch(Data, () => {
		console.log(Data.value);
	}, {
		deep: true
	})
</script>

<style>
</style>